<template>
  <div class="typeCount new-problem">
    <div style="width: 100%; height: 100%; display: flex;margin-top:10px;">
      <div id="order_amountEcharts" style="width: 75%; height: 200%"></div>
      <div class="tab-list">
        <div class="completed_resubmit">
          <div
            class="situation"
            v-for="item in listData"
            :style="{ background: item.bg }"
            :key="item.key"
            @click="goIssues(item.num)"
          >
            <span class="title_tip" :style="{ color: item.color }">{{ item.label }}</span>
            <span class="Num" :style="{ color: item.color }">{{
              issueCount[item.key] ? issueCount[item.key] : '0'
            }}</span>
          </div>
        </div>
        <!-- <p v-for="item in listData" :key="item.key">{{item.label}}{{issueCount[item.key]}}</p> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // import { ElMessage } from 'element-plus';
  import { watch, ref, onMounted, getCurrentInstance } from 'vue'; // reactive,
  import { useRouter } from 'vue-router';
  import { questionStatusCount } from '@/http/api/problem';
  import { color } from 'echarts';
  const { proxy } = getCurrentInstance() as any;
  const order_amount = ref<HTMLElement>(); // 工单总量
  const router = useRouter();
  let dataArr = ref([
    '超时未分发',
    '超时未受理',
    '超时无解决计划',
    '超时未解决',
    '超时未补全',
    '超时未关闭',
    '超时未复核',
    '超时未受理（业务）'
  ]);
  let listData = ref([
    {
      num: '1',
      color: '#27d7af',
      bg: 'rgba(39, 215, 175, 0.1)',
      label: '超时未分发',
      key: 'waitAssignCount'
    },
    {
      num: '2',
      color: '#fb6f5d',
      bg: 'rgba(251, 111, 93, 0.1)',
      label: '超时未受理',
      key: 'techniqueNotHandle'
    },
    {
      num: '3',
      color: '#5d676d',
      bg: 'rgba(93, 103, 109, 0.1)',
      label: '超时无解决计划',
      key: 'techniqueNotPlan'
    },
    {
      num: '4',
      color: '#0079f5',
      bg: 'rgba(0, 122, 245, 0.1)',
      label: '超时未解决',
      key: 'techniqueNotSolve'
    },
    { num:'5',color: '#c1763d', bg: 'rgba(193, 118, 61, 0.1)', label: '超时未补全', key: 'returnEdit' },
    { num:'6',color: '#a048ff', bg: 'rgba(141, 34, 254, 0.1)', label: '超时未关闭', key: 'waitClose' },
    {
      num: '7',
      color: 'rgb(255, 187, 55)',
      bg: 'rgba(255, 187, 55, 0.1)',
      label: '超时未复核',
      key: 'businessNotSolve'
    },
    {
      num: '8',
      color: '#fb6f5d',
      bg: 'rgba(252, 111, 94, 0.1)',
      label: '超时未受理（业务）',
      key: 'businessNotAccept'
    }
  ]);
  let valueArr = ref([]);
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const issueCount = ref('');
  onMounted(() => {
    order_amountList();
    getStatusCount();
  });
  const getStatusCount = () => {
    questionStatusCount().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      issueCount.value = res.data.data;
      valueArr.value.push(issueCount.value.waitAssignCount);
      valueArr.value.push(issueCount.value.techniqueNotHandle);
      valueArr.value.push(issueCount.value.techniqueNotPlan);
      valueArr.value.push(issueCount.value.techniqueNotSolve);
      valueArr.value.push(issueCount.value.returnEdit);
      valueArr.value.push(issueCount.value.waitClose);
      valueArr.value.push(issueCount.value.businessNotSolve);
      valueArr.value.push(issueCount.value.businessNotAccept);
      order_amountList();
    });
  };
  const order_amountList = () => {
    if (order_amount.value != null && order_amount.value != '' && order_amount.value != undefined) {
      order_amount.value.dispose();
    }
    order_amount.value = proxy.$ECharts.init(document.getElementById('order_amountEcharts'));
    let option;
    option = {
      tooltip: {
        trigger: 'item'
      },
      grid: {
        top: '15',
        bottom: '20%',
        left: '10%',
        right: '60'
      },
      xAxis: {
        type: 'category',
        data: dataArr.value,
        axisLabel: {
          rotate: -40,
          fontSize: 10
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data:valueArr.value,
          //data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          type: 'bar'
          //colorBy: 'data'
        }
      ]
    };
    option && order_amount.value.setOption(option);
  };

  const goIssues = (num: string) => {
    router.push({
      name: 'Issues',
      params: {
        type: num
      }
    });
  };
  watch(
    () => props.changeTime,
    () => {
      getStatusCount();
    }
  );
</script>
<style lang="less" scoped>
  .new-problem .completed_resubmit {
    margin-left: 10px;
    .situation {
      padding: 0 5px;
      margin-bottom: 10px;
      height: 36px;
      background: rgba(70, 84, 93, 0.1);
      cursor: pointer;
      border-radius: 6px;
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .Num {
        font-size: 14px;
        font-weight: bold;
        /*   float: right; */
      }
      .title_tip {
        // display: block;
        // height: 100%;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // font-weight: 400;
      }
      &.completed {
        margin-bottom: 4px;
      }
    }
  }
</style>
